<template>
<div>
    <el-container>
      <el-aside width="200px">
        <!-- 侧边栏内容 -->
        <el-menu>
          <!-- 侧边栏菜单项 -->
        </el-menu>
      </el-aside>
      
      <el-container>
        <el-header>Header</el-header>
        
        <el-main>
          <!-- 页面主体内容 -->
          <el-button type="primary">普通按钮</el-button>
          <el-button type="success" plain>Plain按钮</el-button>
          <el-button type="primary" round>Round按钮</el-button>
          <el-button icon="el-icon-sugar" circle>Circle按钮</el-button>
        </el-main>
        
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
</div>
  </template>
  
  <script>
  import { ElContainer, ElHeader, ElAside, ElMain, ElFooter, ElButton, ElMenu } from 'element-plus';
  
  export default {
    components: {
      ElContainer,
      ElHeader,
      ElAside,
      ElMain,
      ElFooter,
      ElButton,
      ElMenu
    }
  };
  </script>
  
  <style>
  /* 样式可以根据需要添加 */
  .el-main{
    height: calc(100vh - 120px);
}
  .el-header, .el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #d3dce6;
  }
  </style>